<template>
  <el-divider class="expand-divider">
    <slot>{{title}}</slot>
  </el-divider>
</template>

<script>
import { Divider } from 'element-ui'
import { setStyle } from 'element-ui/lib/utils/dom'

export default {
  name: 'ExpandDivider',
  props: {
    ...Divider.props,
    color: {
      type: String,
      default: '#F0F0F0'
    },
    textColor: {
      type: String,
      default: '#BFBFBF'
    },
    title: {
      type: String
    }
  },
  mounted () {
    setStyle(this.$el, { 'backgroundColor': this.color, margin: '31px 0 30px' })
    setStyle(this.$el.querySelector('.el-divider__text'), { 'color': this.textColor })
  }
}
</script>
